<!--
 * @Author: 胡海
 * @Date: 2020-11-23 14:45:36
 * @LastEditors: 胡海
 * @LastEditTime: 2020-11-23 15:04:07
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增删便签任务</title>
    <link rel="stylesheet" href="../class3/index.css">
    <script src="../class3/vue.js"></script>
</head>
<body>
    <div class="page-content">
        <h2>任务计划列表</h2>
    </div>
</div>
<div class="main">
    <h3 class="big-title">添加任务：</h3>
    <input 
        placeholder="例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务" 
        class="task-input" 
        type="text"
        v-model="todo"
        v-on:keyup.13="addTodo"
    />
    <ul class="task-count" v-show="list.length">
        <li>{{noCheckeLength}}个任务未完成</li>
        <li class="action">
            <a class="active" href="#">所有任务</a>
            <a href="#">未完成的任务</a>
            <a href="#">完成的任务</a>
        </li>
    </ul>
    <h3 class="big-title">任务列表：</h3>
    <div class="tasks">

        <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
        <ul class="todo-list">
            <li class="todo" :class="{completed: item.isChecked,editing: item === edtorTodos}" v-for="item in list" >
                <div class="view">
                    <input class="toggle" type="checkbox" v-model="item.isChecked" />
                    <label @dblclick="edtorTodo(item)">{{ item.title }}</label>
                    <button class="destroy" @click="deleteTodo(item)"></button>
                </div>
                <input 
                    v-foucs="edtorTodos === item" 
                    class="edit" 
                    type="text" 
                    v-model = "item.title"
                    @blur="edtorTodoed(item)"
                    @keyup.13="edtorTodoed(item)"
                    @keyup.esc="cancelTodo(item)"
                />
            </li>
        </ul>
    </div>
</div>
<script src="../class3/app2.js"></script>
</body>
</html>